<template>
<div class="page">
    <p>index: </p>
    <p>name:{{user.name}} </p>
    <p>age:{{user.age}} </p>


    <h3>===========son============</h3>
    <Son :user="user" />

    <button class="btn" @click="handleChangeUser">change user</button> <br>
    <button  class="btn" @click="handleChangeUserAge">change userAge</button>
</div>


</template>
<script setup>
    import { ref } from 'vue'
    import Son from './Son.vue'
    
    const user = ref({
        name: 'chen',
        age: Math.random(),
    })

    const handleChangeUser = () => {
        user.value = {
            name: 'sw' + new Date().getTime(),
            age: Math.random(),
        }
    }

    const handleChangeUserAge = () => {
        user.value.age = Math.random();
    }

</script>
<style lang="scss" scoped>
.page {
    text-align: center;
}
.btn {
    color: #FFF;
    background: red;
}
</style>